<script setup lang="ts">
interface Props {
  mode?: "center" | "top" | "bottom" | "left" | "right";
  visible?: boolean;
  destroyOnClose?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  mode: "center",
  visible: false,
  destroyOnClose: true
});
const emit = defineEmits<{
  (e: "update:visible", boolean): void;
}>();
const align = computed(() => {
  let c = "";
  switch (props.mode) {
    case "center":
      c = "justify-center items-center";
      break;
    case "top":
      c = "justify-center items-start";
      break;
    case "bottom":
      c = "justify-center items-end";
      break;
    case "left":
      c = "justify-start items-center";
      break;
    case "right":
      c = "justify-end items-center";
      break;
  }
  return c;
});
function closeModel() {
  emit("update:visible", false);
}
function loop() {}
</script>

<template>
  <teleport to="body">
    <template v-if="destroyOnClose">
      <div
        v-if="visible"
        class="overlay"
        :class="[align]"
        w:w="screen"
        w:h="screen"
        w:pos="fixed top-0 left-0"
        w:flex="~ nowrap"
        @click="closeModel"
      >
        <div @click.stop="loop">
          <slot />
        </div>
      </div>
    </template>
    <template v-else>
      <div
        v-show="visible"
        class="overlay"
        :class="[align]"
        w:w="screen"
        w:h="screen"
        w:pos="fixed top-0 left-0"
        w:flex="~ nowrap"
        @click="closeModel"
      >
        <div @click.stop="loop">
          <slot />
        </div>
      </div>
    </template>
  </teleport>
</template>

<style lang="scss" scoped>
.overlay {
  background-color: var(--m-overlay-color);
}
</style>
